<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';
import { useBooleanStore } from '@/store';
import { Notification } from '@arco-design/web-vue';
import { saveByCar } from '@/api/les';
import { getName, getUserJob } from '@/utils/auth';

const props = defineProps<{
  tableData: any;
}>();
const columns: any[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '料车编号',
    dataIndex: 'carCode',
  },
  {
    title: '料车使用人',
    dataIndex: 'carUser',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  // {
  //   title: '料车状态',
  //   dataIndex: 'carStatus',
  //   slotName: 'carStatus',
  //   sortable: {
  //     sortDirections: ['ascend', 'descend'],
  //   },
  // },
  // {
  //   title: '站点地址',
  //   dataIndex: 'carSeat',
  //   sortable: {
  //     sortDirections: ['ascend', 'descend'],
  //   },
  // },
  {
    title: 'RFID',
    dataIndex: 'rfId',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '操作人',
    dataIndex: 'createdBy',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '操作时间',
    dataIndex: 'creationDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '最后修改时间',
    dataIndex: 'lastUpdateDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    align: 'center',
    fixed: 'right',
  },
];

const booleanStore = useBooleanStore();
// 创建一个响应式的本地副本
const localTableData = ref<any[]>([]);
// 数据库一共有多少条
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);

// 监听props.tableData的变化，并更新本地副本
watch(
  () => props.tableData,
  () => {
    localTableData.value = props.tableData?.responseBody?.records || [];
    total.value = props.tableData?.responseBody?.total || 0;
  },
  { immediate: true }
);

function change(e: any) {
  pageNum.value = e;
}
function changeSize(e: any) {
  pageSize.value = e;
}
function onEdit(record: any) {
  booleanStore.setRow(record);
  booleanStore.toggleBool2(10);
}
// 删除
async function onDel(record: any) {
  // const info: any = {
  //   data: record,
  // };
  console.log(record);
  record.lastUpdatedBy = getName() as string;
  record.isDelete = 1;
  const res = await saveByCar(record);
  if (res.retCode === '200') {
    Notification.success({
      title: '成功',
      content: res.message,
      closable: true,
    });
  } else {
    Notification.error({
      title: '失败',
      content: res.message,
      closable: true,
    });
  }
  booleanStore.watchUpdate(17);
}
// 监听页面变化
watch([pageNum, pageSize], () => {
  booleanStore.setPage(pageNum.value, pageSize.value, 40);
});
</script>

<template>
  <div>
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
    >
      <template #index="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
      <!-- <template #carStatus="{ record }">{{
        record.carStatus === "0" ? '正常' : '故障'
      }}</template> -->
      <template #action="{ record }">
        <a-button type="text" class="font-color" @click="onEdit(record)"
          >修改</a-button
        >
        <a-popconfirm
          content="你确定要删除该用户吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:pageSize="changeSize"
      />
    </div>
  </div>
</template>

<style scoped>
.top-table {
  white-space: nowrap;
}
.page-position {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
